import { AtMessage } from 'taro-ui'
import Taro from '@tarojs/taro'
import { useSelector } from 'react-redux'
import styles from './index.module.scss'

type productParams = {
  id: number
  name: string
  coverUrl: string
  price: number
  isOver: boolean
}

export default function Product({ data }: { data: productParams }) {
  //获取仓库token信息
  const token = useSelector((state: any) => state.user.token)
  const handleEnterProductDetailPage = () => {
    Taro.navigateTo({
      url: `/pages/productDetail/index?id=${data.id}`,
    })
  }

  const handelPay = (event) => {
    event.stopPropagation()
    console.log('token', token)

    if (!token) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
      })
    } else {
      Taro.navigateTo({
        url: `/pages/newOrder/index?id=${data.id}`,
      })
    }
  }

  const showToast = (e) => {
    e.stopPropagation()
    Taro.showToast({
      title: '已抢光',
      icon: 'none',
    })
  }

  return (
    <>
      <div
        className={styles.productItem}
        onClick={handleEnterProductDetailPage}
      >
        <div className={styles.productImgDiv}>
          <img className={styles.productImg} src={data.coverUrl} alt='' />
        </div>
        {/* <img
        className={styles.productImg}
        src={require('../../assets/home/image.png')}
        alt=''
      /> */}
        {/* </div> */}
        <div className={styles.productContent}>
          <div className={styles.productDesc}>{data.name}</div>
          <div className={styles.productFooter}>
            <div className={styles.productPrice}>¥ {data.price}</div>
            <div className='buy-btn'>
              {data.isOver ? (
                <button className={styles.disabledBtn} onClick={showToast}>
                  <span className={styles.disabledSpan}>已抢光</span>
                </button>
              ) : (
                <button className={styles.btn} onClick={handelPay}>
                  <span className={styles.span}>去购买</span>
                </button>
              )}
            </div>
          </div>
        </div>
        {data.isOver && (
          <img
            className={styles.saleImg}
            src={require('../../assets/home/sale.png')}
            alt=''
          />
        )}
      </div>{' '}
      <AtMessage />
    </>
  )
}
